/*
 * 修复ElementUI的Dialog在鼠标划出对对话框区域后容易意外关闭的问题
 * 方案：设置默认的el-dialog的before-close方法，并监听鼠标事件。只有当鼠标在modal中点击并松开时才会关闭dialog，否则不关闭。
 * 问题：对于用户自定义的before-close，需要手动调用checkAndClose
 */

import Vue from "vue";
import Element from "element-ui";

// 是否可关闭标记
let modalDownFlag = false;
let modalUpFlag = false;

// 初始化el-dialog的before-close事件
// 将自定义的before-close时间设为默认事件
const initDialogBeforeClose = () => {
  Element.Dialog.props.beforeClose.default = function(done) {
    // console.log("Element.Dialog.props.beforeClose");
    // console.log("close this: ", this);
    // console.log("event: ", event);
    // console.log("event.currentTarget: ", event.currentTarget);
    antiUnexpectedDone(done);
  }
}

// 等待ElementUI初始化安装完成后执行回调
(function waitForElementInstall(callback) {
  //通过Vue.prototype.$ELEMENT校验ElementUI的安装是否完成
  if(!Vue.prototype.$ELEMENT) {
    setTimeout(waitForElementInstall, 100, callback);
  } else {
    callback();
  }
})(initDialogBeforeClose);

// 鼠标按下事件，如果按下的元素为modal，则标记
const mousedown = event => {
  // console.log("mousedown event.target: ", event.target);
  const target = event.target;
  if(!target || !target.classList) {
    return;
  }
  if(target.classList.contains("el-dialog__wrapper")) {
    modalDownFlag = true;
  }
}
// 监听鼠标按下事件
window.addEventListener("mousedown", mousedown);

// 鼠标松开事件，如果按下的元素为modal，则标记
const mouseup = event => {
  // console.log("mouseup event.target: ", event.target);
  const target = event.target;
  if(!target || !target.classList) {
    return;
  }
  if(target.classList.contains("el-dialog__wrapper")) {
    modalUpFlag = true;
  }

  // 定时释放标记
  setTimeout(() => {
    // console.log("mouseup setTimeout");
    modalDownFlag = false;
    modalUpFlag = false;
  });
}
// 监听鼠标松开事件
window.addEventListener("mouseup", mouseup);

// 防止误关闭done
const antiUnexpectedDone = done => {
  // console.log("antiUnexpectedDone");
  if(modalDownFlag && modalUpFlag) {
    done();
    return true;
  }
  return false;
}

export {
  // 导出防止误关闭done方法，自定义before-close中可使用该方法防误关闭
  antiUnexpectedDone,
};
